<template>
  <view class="content">
    <view class="content-top">
      <view class="posts-top">
        <u-icon name="close" color="#aaa" size="40" @tap="saveDraft"></u-icon>
        <view class="save" @tap="saveDraft"> 存草稿 </view>
      </view>
      <!-- 填写内容 -->
      <view class="posts-main">
        <view class="title"
          ><u-input
            class="title-input"
            placeholder="请填写标题(必填)"
            v-model="title"
          />
          <view class="length">0/20</view>
        </view>
        <view class="textarea">
          <u-input
            class="title-input"
            placeholder="请填写正文(必填)"
            v-model="text"
            type="textarea"
            maxlength="200"
          />
          <!-- <textarea v-model="text" id="" placeholder="请填写正文(必填)" maxlength="150"></textarea> -->
        </view>
        <view v-if="type == 'img'">
          <u-upload
            :header="header"
            :action="action"
            ref="uUpload"
            :file-list="fileList"
            del-bg-color="#606165"
            del-color="#fff"
          ></u-upload>
        </view>
        <view v-if="src == '' && type == 'video'" @tap="getVideo" class="video">
          <view v-if="type == 'video'">
            <u-icon
              name="camera"
              color="#ccc"
              size="60"
              class="cameraIcon"
            ></u-icon
          ></view>
        </view>
        <view v-if="src" class="videoBox">
          <!-- <view class="close">X</view> -->
          <u-icon
            @tap="clearVideo"
            name="close"
            size="40"
            color="#fff"
            class="close"
          ></u-icon>
          <video :src="src" class="getVideo"></video> </view
      ></view>
    </view>
    <view class="bottom">
      <view class="content-bottom">
        <view class="content-bottom-top">
          <u-icon name="map" color="#444" size="60"></u-icon>
          <view class="where">在哪里</view>
        </view>
        <u-icon name="arrow-right" color="#444" size="60"></u-icon>
      </view>
      <view class="status">
        <view class="checkStatus" @tap="checkType"
          ><view style="margin-right: 10rpx">公开的</view>
          <u-icon name="arrow-down" color="#444" size="30"></u-icon>
        </view>
        <u-popup v-model="show" mode="bottom" height="300px">
          <view class="typecheck">
            <view class="text all">公开</view>
            <view class="text">同步到圈子</view>
            <view class="text">仅自己可见</view>
            <view class="text close">取消</view></view
          >
        </u-popup>
      </view>
      <view class="sub">
        <u-button type="error" class="subBtn" style="height: 100rpx; width: 80%"
          >发布</u-button
        >
      </view>
    </view>
    <u-modal
      v-model="showDraft"
      title=""
      @confirm="save"
      @cancel="noSave"
      confirm-color="#f00"
      cancel-text="不保存"
      confirm-text="保存草稿"
      :show-cancel-button="true"
    >
      <!-- <view class="slot-content">
        <rich-text :nodes="content"></rich-text>
      </view> -->
      <view class="modeltitle">是否保存为草稿?</view>
    </u-modal>
  </view>
</template>

<script>
import {
  lk_buyer,
  lk_common,
  lk_expert,
  lk_seller,
  lk_manager,
  lk_consumer,
} from "@/config/myConfig.js";
export default {
  data() {
    return {
      title: "",
      text: "",
      fileList: [],
      show: false,
      header: {
        accessToken: uni.getStorageSync("token"),
      },
      action: `${lk_common}/common/common/upload/file`, //上传图片的地址
      type: "",
      src: "",
      showDraft: false,
    };
  },
  onLoad(option) {
    this.type = option.type;
  },
  methods: {
    getVideo() {
      let that = this;
      uni.chooseVideo({
        sourceType: ["camera", "album"],
        success: function (res) {
          that.src = res.tempFilePath;
          console.log(that.src);
        },
      });
    },
    checkType() {
      this.show = true;
    },
    clearVideo() {
      this.src = "";
    },
    saveDraft() {
      this.showDraft = true;
    },
    noSave() {
      console.log(222);
      uni.switchTab({
        url: "/pages/tabbar/community/community",
      });
    },
    save() {
      console.log(11);
      uni.switchTab({
        url: "/pages/tabbar/community/community",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  margin-top: 40rpx;
  .content-top {
    padding: 0 30rpx;
    background-color: #fff;
    .posts-top {
      display: flex;
      justify-content: space-between;
      .save {
        color: #f00;
        border: 2rpx solid #f00;
        border-radius: 40rpx;
        padding: 20rpx 40rpx;
      }
    }
    .posts-main {
      margin-top: 30rpx;
      .title {
        border-bottom: 2rpx solid #ccc;
        padding-bottom: 20rpx;
        display: flex;
        align-items: center;
        .length {
          color: #ccc;
        }
      }
      .textarea {
        width: 100%;
        height: 300rpx;
      }
      .video {
        border: 2rpx solid #ccc;
        width: 150rpx;
        line-height: 150rpx;
        text-align: center;
        height: 150rpx;
      }
      .videoBox {
        width: 150rpx;
        height: 150rpx;
        position: relative;
        .close {
          position: absolute;
          z-index: 10;
          color: #f00;
          // font-size:60rpx;
          background-color: #aaa;
          border-radius: 50%;
          top: -10rpx;
          right: -10rpx;
        }
        .getVideo {
          width: 150rpx;
          height: 150rpx;
        }
      }
    }
  }
  .bottom {
    background-color: #fff;
    height: 900rpx;
    .content-bottom {
      padding: 0 30rpx;
      margin-top: 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .content-bottom-top {
        display: flex;
        align-items: center;
      }
    }
    .status {
      padding: 0 30rpx;
      margin-top: 60rpx;
      .checkStatus {
        width: 200rpx;
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        line-height: 80rpx;
        border: 2rpx solid #ccc;
        border-radius: 40rpx;
      }
      .typecheck {
        display: flex;
        height: 100%;
        flex-direction: column;
        justify-content: space-around;
        .text {
          text-align: center;
          font-size: 40rpx;
          margin-top: 20rpx;
        }
        .all {
          color: #f00;
        }
        .close{
          color: #aaa;
        }
      }
    }
    .sub {
      position: fixed;
      bottom: 30rpx;
      width: 100%;
      .subBtn {
        border-radius: 50rpx;
        margin: 0 auto;
      }
    }
  }
}
/deep/.u-drawer-bottom{
  width: 90% !important;
  margin: 0 auto;
  border-radius: 20rpx;
  overflow: hidden;
  bottom: 30rpx;
}
.modeltitle {
  text-align: center;
}
</style>